<template>
  <div>
    <h1>{{count}}</h1>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },

/* // new Vue 之后，先初始化事件系统和生命周期系统，数据等都还没有放在实例上
  beforeCreate() {
    console.log(this);
    debugger;
  },

// 在created之前，拿到了data，并放在实例上，进行了数据代理和数据劫持的操作

// beforeCreate 和 created 中创建前和创建后的创建指的是：_data数据的创建和数据代理、数据劫持的创建
  created() {
    console.log(this);
    debugger
  }, */

// 在挂载（虚拟DOM转为真实DOM并渲染在浏览器中）之前 ，浏览器中展示的还是容器中没有经过Vue编译的DOM结构，这个DOM结构和Vue没有任何关系
// 在脚手架中的index.html的容器app中添加一些文字即可看见效果
// 在这个阶段所有操作DOM都不生效，因为我们在Vue中操作的是Vue生成的DOM，而不是模板中的DOM，模板中的DOM迟早要被替换
  beforeMount(){
    debugger;
  },

// mounted 之前，Vue根据虚拟DOM创建好了真实DOM，并且替换掉了el容器
// 在这个阶段，我们会做所有的初始化操作 --- 开启定时器、发送初始化请求、发起订阅、绑定自定义事件等等
  mounted() {
    debugger;
  },
};
</script>

<style>
</style>